<template>
  <div class="login_container">
    <h1 class="loginTitle">Welcome to your notebook!</h1>
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/logo.png">
      </div>
      <div>
        <el-form :model="user" label-width="100px" class="demo_ruleForm" :rules="rules" ref="user">

          <el-form-item label="用户账号" prop="username">
            <el-input placeholder="username" prefix-icon="el-icon-user" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="account">
            <el-input type="password" placeholder="account" prefix-icon="el-icon-key" v-model="user.account"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('user')">提交</el-button>
            <el-button @click="resetForm('user')">重置</el-button>
            <el-button type="primary" @click="register('user')">注册</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: {
        account: '',
        username: ''
      },
      rules: {
        account: [
          { required: true, message: 'please input your account', trigger: 'blur' },
          { min: 5, max: 10, message: 'length between 5 and 10 chars', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'please input your password', trigger: 'blur' },
          { min: 5, max: 10, message: 'length between 5 and 10 chars', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {

    //重置表单的按钮
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //登录按钮功能实现
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message('请牢记用户名和密码!');
          axios.post("http://127.0.0.1:7001/login", { user: this.user })
            .then((res) => {
              if (res.data.code === 200) {
                localStorage.setItem("token", res.data.token);
                this.$router.push('/diary');
              } else if (res.data.code === 300) {
                alert('密码错误');
              } else if (res.data.code === 400) {
                alert('用户不存在，请先注册！');
              } else {
                alert('登录失败！');
              }
            })

        } else {
          alert('error submit!!');
          return false;
        }
      });
    },


    //注册按钮功能实现
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message('请牢记用户名和密码!');
          axios.post("http://127.0.0.1:7001/register", { user: this.user })
            .then((res) => {
              if (res.data.code === 200) {
                localStorage.setItem("token", res.data.token);
                this.$router.push('/diary');
              } else if (res.data.code === 400) {
                alert('用户名已存在！');
              }
            })

        } else {
          alert('error submit!!');
          return false;
        }
      });

    }

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login_container {
  background-color: #909399;
  height: 100%;
}


.loginTitle {
  color: #FFFFFF;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
}

.login_box {
  width: 450px;
  height: 280px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}

.avatar_box {
  height: 100px;
  width: 100px;
  border: 1px solid #b9cff0;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;

}

img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

.demo_ruleForm {
  position: absolute;
  bottom: 0;
  width: 80%;
}
</style>
